<template>
    <div class="login-form-container">
        <el-form ref="loginForm" :model="loginForm" label-width="100px" class="login-form">
            <el-form-item label="用户名" class="form-item">
                <el-input v-model="loginForm.username" class="input-field"></el-input>
            </el-form-item>
            <el-form-item label="密码" class="form-item">
                <el-input type="password" v-model="loginForm.password" class="input-field"></el-input>
            </el-form-item>
            <el-form-item class="form-item">
                <el-button type="primary" @click="submitForm" class="submit-btn">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
            },
        };
    },
    methods: {
    submitForm() {
      axios.post('/api/user/login', this.loginForm)
        .then(response => {
          if (response.data.code === 1) {
            this.$message.success('登录成功');
            // 保存 token 到本地存储
            localStorage.setItem('token', response.data.data.token);
            // 跳转到指定页面
            this.$router.push('/todolist');
          } else {
            this.$message.error(response.data.msg);
          }
        })
        .catch(error => {
          this.$message.error('登录失败');
        });
    }
  }
};
</script>

<style scoped>
.login-form-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 80vh;
    /* 调整高度为80vh */
    margin-top: 50px;
    /* 上方间距为50px */
}

.login-form {
    width: 400px;
}

.form-item {
    margin-bottom: 20px;
}

.input-field {
    width: 100%;
}

.submit-btn {
    width: 100%;
}
</style>